<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta content="yes" name="apple-mobile-web-app-capable">
          <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, target-densityDpi=device-dpi" />
          <!-- 微软的老式浏览器 -->
          <meta name="MobileOptimized" content="320">
          <!-- 启用360浏览器的极速模式(webkit) – -->
          <meta name="renderer" content="webkit">
          <!-- 避免IE使用兼容模式 -->
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
          <meta name="HandheldFriendly" content="true">
          <!-- uc强制竖屏 -->
          <meta name="screen-orientation" content="portrait">
          <!-- QQ强制竖屏 -->
          <meta name="x5-orientation" content="portrait">
          <!-- UC强制全屏 -->
          <meta name="full-screen" content="yes">
          <!-- QQ强制全屏 -->
          <meta name="x5-fullscreen" content="true">
          <!-- UC应用模式 若开启长按无法复制链接-->
          <!--meta name="browsermode" content="application"-->
          <!-- QQ应用模式 -->
          <meta name="x5-page-mode" content="app">
          <!--网站开启对web app程序的支持-->
          <meta name="apple-touch-fullscreen" content="yes">
          <!--在web app应用下状态条（屏幕顶部条）的颜色-->
          <meta name="apple-mobile-web-app-status-bar-style" content="black">
          <!-- windows phone 点击无高光 -->
          <meta name="msapplication-tap-highlight" content="no">
          <!--移动web页面是否自动探测电话号码-->
          <!--<meta http-equiv="x-rim-auto-match" content="none">-->
          <!--手机号码显示为拨号链接-->
          <meta name="format-detection" content="telephone=no">
          <meta http-equiv="Cache-Control" content="max-age=300" />
          <meta http-equiv="Expires" content="300" />
          <title>8号金融街</title>
          <link rel="stylesheet" href="../css/reset.css">
          <link rel="stylesheet" href="../css/circle.css">
          <link rel="stylesheet" href="../assets/swiper/css/swiper.min.css">
          <link rel="stylesheet" href="../assets/layer_mobile/need/layer.css">
          <script src="../js/jquery.min.js"></script>
          <script src="../assets/swiper/js/swiper.jquery.min.js"></script>
          <script src="../js/common.js"></script>
          <script src="../js/circle.js"></script>
          <script src="../assets/layer_mobile/layer.js"></script>
    </head>
    <body>
    <div class="tabs">
      <div class="nav-swiper-container">
          <div class="swiper-wrapper">
              <div class="swiper-slide active platform" >平台</div>
              <div class="swiper-slide investment">投顾</div>
          </div>
      </div>
    </div>

    <div class="container">
      
      <div class="item-one">
        <div class="tody">
        <div class="tody-re">
          <div class="tody-item">
            <h4>今日推荐</h4>
          </div>
          <div class="tody-cp">
            <div class="top-swiper-container swiper-container">
              <div class="swiper-wrapper">
                  <div class="swiper-slide">
                      <div class="tody-con">
                        <div class="tody-top">
                          <div class="tody-icon">
                            <img src="../images/tree.png" height="40" width="140">
                          </div>
                          <div class="tody-sug">
                            <p>放心投</p>
                          </div>
                        </div>
                        <div class="tody-bottom">
                          <ul>
                            <li>
                              <div class="tody-part">
                                <h4>135</h4>
                                <p>热门评点</p>
                              </div>
                              <span></span>
                            </li>
                            <li>
                              <div class="tody-part">
                                <h4>135</h4>
                                <p>热门评点</p>
                              </div>
                              <span></span>
                            </li>
                            <li>
                              <div class="tody-part">
                                <h4>135</h4>
                                <p>热门评点</p>
                              </div>
                            </li>
                          </ul>
                        </div>
                      </div>
                  </div>
                  <div class="swiper-slide">
                      <div class="tody-con">
                        <div class="tody-top">
                          <div class="tody-icon">
                            <img src="../images/tree.png" >
                          </div>
                          <div class="tody-sug">
                            <p>放心投</p>
                          </div>
                        </div>
                        <div class="tody-bottom">
                          <ul>
                            <li>
                              <div class="tody-part">
                                <h4>135</h4>
                                <p>热门评点</p>
                              </div>
                              <span></span>
                            </li>
                            <li>
                              <div class="tody-part">
                                <h4>135</h4>
                                <p>热门评点</p>
                              </div>
                              <span></span>
                            </li>
                            <li>
                              <div class="tody-part">
                                <h4>135</h4>
                                <p>热门评点</p>
                              </div>
                            </li>
                          </ul>
                        </div>
                      </div>
                  </div>
                  </div>
              </div>
          </div>
          </div>
        </div>
        <div class="hot-circle">
          <div class="hot-pro">
            <div class="hot-title">
              <h4>热门圈子</h4>
            </div>
            <div class="hot-detail">
              <ul>
                <li>
                  <a href="#">
                    <div class="hot-con ">
                        <div class="hot-top">
                          <div class="hot-icon">
                            <img src="../images/tree.png" >
                            <span class="hot-circle">
                              <p>圈子群聊</p>
                            </span>
                          </div>
                          <div class="hot-sug">
                            <p>放心投</p>
                          </div>
                        </div>
                        <div class="hot-bottom">
                          <ul>
                            <li>
                              <div class="hot-part">
                                <h4>135</h4>
                                <p>热门评点</p>
                              </div>
                            </li>
                            <li>
                              <div class="hot-part">
                                <h4>135</h4>
                                <p>热门评点</p>
                              </div>
                            </li>
                            <li>
                              <div class="hot-part">
                                <h4>135</h4>
                                <p>热门评点</p>
                              </div>
                            </li>
                          </ul>
                        </div>
                      </div>
                  </a>
                </li>
                 <li>
                  <a href="#">
                    <div class="hot-con ">
                        <div class="hot-top">
                          <div class="hot-icon">
                            <img src="../images/tree.png" >
                            <span class="hot-circle">
                              <p>圈子群聊</p>
                            </span>
                          </div>
                          <div class="hot-sug btn-pru">
                            <p>谨慎投</p>
                          </div>
                        </div>
                        <div class="hot-bottom">
                          <ul>
                            <li>
                              <div class="hot-part">
                                <h4>135</h4>
                                <p>热门评点</p>
                              </div>
                            </li>
                            <li>
                              <div class="hot-part">
                                <h4>135</h4>
                                <p>热门评点</p>
                              </div>
                            </li>
                            <li>
                              <div class="hot-part">
                                <h4>135</h4>
                                <p>热门评点</p>
                              </div>
                            </li>
                          </ul>
                        </div>
                      </div>
                  </a>
                </li>
                 <li>
                  <a href="#">
                    <div class="hot-con ">
                        <div class="hot-top">
                          <div class="hot-icon">
                            <img src="../images/tree.png" >
                            <span class="hot-circle">
                              <p>圈子群聊</p>
                            </span>
                          </div>
                          <div class="hot-sug btn-no">
                            <p>不要投</p>
                          </div>
                        </div>
                        <div class="hot-bottom">
                          <ul>
                            <li>
                              <div class="hot-part">
                                <h4>135</h4>
                                <p>热门评点</p>
                              </div>
                            </li>
                            <li>
                              <div class="hot-part">
                                <h4>135</h4>
                                <p>热门评点</p>
                              </div>
                            </li>
                            <li>
                              <div class="hot-part">
                                <h4>135</h4>
                                <p>热门评点</p>
                              </div>
                            </li>
                          </ul>
                        </div>
                      </div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
  
    
      <div class="item-two">
        <div class="invest">
          <img src="../images/header-one.png">
        </div>
        <div class="invest-adviser">
          <div class="adviser-list">
            <ul>
              <li>
                <div class="ad-top">
                  <div class="ad-icon">
                    <img src="../images/adviser.png">
                  </div>
                  <div class="ad-item">
                    <h4>糊涂金导师</h4>
                    <img src="../images/ad-star.png" height="32" width="32">
                    <p>徒弟</p>
                    <span>123334</span>
                  </div>
                  <div class="ad-btn ad-no">
                    <p>拜师</p>
                  </div>
                </div>
                <div class="ad-center">
                  <ul>
                    <li>
                      <div class="ad-sug">
                        <p>网贷投资</p>
                      </div>
                      <span>10年</span>
                    </li>
                    <li>
                      <div class="ad-sug">
                        <p>踩雷次数</p>
                      </div>
                      <span>0雷</span>
                    </li>
                    <li>
                      <div class="ad-sug">
                        <p>投资平台</p>
                      </div>
                      <span>22家</span>
                    </li>
                  </ul>
                </div>
                <div class="ad-bottom">
                  <p>推荐：&nbsp;&nbsp;投哪网&nbsp;&nbsp;果树财富</p>
                </div>  
              </li>
              <li>
                <div class="ad-top">
                  <div class="ad-icon">
                    <img src="../images/adviser.png">
                  </div>
                  <div class="ad-item">
                    <h4>糊涂金导师</h4>
                    <img src="../images/ad-star.png" height="32" width="32">
                    <p>徒弟</p>
                    <span>123334</span>
                  </div>
                  <div class="ad-btn">
                    <p>拜师</p>
                  </div>
                </div>
                <div class="ad-center">
                  <ul>
                    <li>
                      <div class="ad-sug">
                        <p>网贷投资</p>
                      </div>
                      <span>10年</span>
                    </li>
                    <li>
                      <div class="ad-sug">
                        <p>踩雷次数</p>
                      </div>
                      <span>0雷</span>
                    </li>
                    <li>
                      <div class="ad-sug">
                        <p>投资平台</p>
                      </div>
                      <span>22家</span>
                    </li>
                  </ul>
                </div>
                <div class="ad-bottom">
                  <p>推荐：&nbsp;&nbsp;投哪网&nbsp;&nbsp;果树财富</p>
                </div>  
              </li>
              <li>
                <div class="ad-top">
                  <div class="ad-icon">
                    <img src="../images/adviser.png">
                  </div>
                  <div class="ad-item">
                    <h4>糊涂金导师</h4>
                    <img src="../images/ad-star.png" height="32" width="32">
                    <p>徒弟</p>
                    <span>123334</span>
                  </div>
                  <div class="ad-btn">
                    <p>拜师</p>
                  </div>
                </div>
                <div class="ad-center">
                  <ul>
                    <li>
                      <div class="ad-sug">
                        <p>网贷投资</p>
                      </div>
                      <span>10年</span>
                    </li>
                    <li>
                      <div class="ad-sug">
                        <p>踩雷次数</p>
                      </div>
                      <span>0雷</span>
                    </li>
                    <li>
                      <div class="ad-sug">
                        <p>投资平台</p>
                      </div>
                      <span>22家</span>
                    </li>
                  </ul>
                </div>
                <div class="ad-bottom">
                  <p>推荐：&nbsp;&nbsp;投哪网&nbsp;&nbsp;果树财富</p>
                </div>  
              </li>
              <li>
                <div class="ad-top">
                  <div class="ad-icon">
                    <img src="../images/adviser.png">
                  </div>
                  <div class="ad-item">
                    <h4>糊涂金导师</h4>
                    <img src="../images/ad-star.png" height="32" width="32">
                    <p>徒弟</p>
                    <span>123334</span>
                  </div>
                  <div class="ad-btn active ad-have">
                    <p>已拜师</p>
                  </div>
                </div>
                <div class="ad-center">
                  <ul>
                    <li>
                      <div class="ad-sug">
                        <p>网贷投资</p>
                      </div>
                      <span>10年</span>
                    </li>
                    <li>
                      <div class="ad-sug">
                        <p>踩雷次数</p>
                      </div>
                      <span>0雷</span>
                    </li>
                    <li>
                      <div class="ad-sug">
                        <p>投资平台</p>
                      </div>
                      <span>22家</span>
                    </li>
                  </ul>
                </div>
                <div class="ad-bottom">
                  <p>推荐：&nbsp;&nbsp;投哪网&nbsp;&nbsp;果树财富</p>
                </div>  
              </li>
            </ul>
          </div>
        </div>
      </div>
            
    </div>            
     <!--底部-->
    <div class="footer">
        <div class="footer-item active">
            <a href="#">
                <div class="icon-wrapper active">
                    <i class="basefont"></i>
                </div>
                <span>首页</span>
            </a>
        </div>
        <div class="footer-item">
            <a href="#">
                <div class="icon-wrapper">
                    <i class="licai"></i>
                </div>
                <span>理财</span>
            </a>
        </div>
        <div class="footer-item">
            <a href="#">
                <div class="icon-wrapper">
                    <i class="ceping"></i>
                </div>
                <span>测评</span>
            </a>
        </div>
        <div class="footer-item">
            <a href="#">
                <div class="icon-wrapper">
                    <i class="center"></i>
                </div>
                <span>我的</span>
            </a>
        </div>
    </div>

    <script type="text/javascript">

// 两个模块切换

    $(".platform").click(function() {
      $(".item-one").css("display","block");
      $(".item-two").css("display","none");
      $(".platform").addClass('active');
      $(".investment").removeClass('active');
      $('body').css('background','#ffffff');
    });

    $(".investment").click(function() {
      $(".item-one").css("display","none");
      $(".item-two").css("display","block");
      $(".investment").addClass('active');
      $(".platform").removeClass('active');
      $('body').css('background','#f4f5fa');
    });
console.log(2);
    // 拜师弹窗
    $('.ad-btn').click(function() {
      var _this = this;

      var bsCon  = '<div class="bs">'
      +'<img src="../images/baishi.png">'
    
    +'<div class="bs-con">'
    +' <p>徒弟<span><br/>(<br/>我是王华斌<br/>)<br/></span>仰慕</p><p>师傅德才兼备<br/>，<br/>在网贷理</p><p>财上具备独到的目光<br/>。<br/>徒</p><p>弟愿从今日起<br/>，于</p><p>“<br/>投哪网圈子<br/>”<br/>拜</p><p><span>“<br/>我叫郭大侠<br/>”<br/></span>为师<br/>。日</p><p>后跟随师傅脚步<br/>，<br/>关注师</p><p>傅动态<br/>，<br/>提升网贷理财知</p><p>识<br/>，<br/>提高避雷意识<br/>。<br/></p>'
    +'</div>'
   +' <div class="bs-btn">'
      +'<p class="kaolv">我再考虑考虑</p>'
     +' <p class="chengshang">呈上拜师贴</p>'
   +' </div>'
   +'</div>';

          $(this).addClass('active');
          $(this).html('已拜师');
          var sCon = '<div class="s-item"><div class="s-title">'
      +'<img src="../images/baishi-suc.png">'
    +'</div>'
    +'<div class="s-con">'
     +' <p>恭喜您已成为</p>'
      +'<p><span>我叫郭大侠</span>的徒弟</p>'
    +'</div>'
    +'<div class="s-mon">'
      +'<p>+50金币</p>'
    +'</div>'
    +'<a class="s-btn"><p>领取师傅红包</p></a></div>';

           var thirdCon = '<div class="s-item"><div class="s-title">'
      +'<img src="../images/baishi-suc.png">'
    +'</div>'
    +'<div class="s-con third-con">'
     +' <p>恭喜您已成为</p>'
      +'<p><span>我叫郭大侠</span>的徒弟</p>'
    +'</div>'
    +'<a class="s-btn third-btn"><p>领取师傅红包</p></a></div>';
          layer.open({
            content: bsCon
          });
          $('.chengshang').click(function(){
            $(_this).addClass('active');
            $(_this).html('已拜师');
            layer.close('all');
            layer.open({
              content: sCon
            });
          })
    });
    $('.ad-have').click(function(event) {
          var _this = this;
         
          layer.open({
            style: 'color:balck;',
          content: '是否解除师徒关系？'
          ,btn: ['是', '否']
          ,yes: function(index){
            $(_this).removeClass('active');
            $(_this).html('拜师');
            layer.close(index);
          },no:function(index){
            $(_this).addClass('active');
            $(_this).html('已拜师');
            layer.close(index);
          }
           });
    });
    </script>
    </body>
</html>